<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>仪器安装档案新增</title>
    <meta charset="utf-8">
    <!-- Bootstrap Core CSS -->
    <link href="${css}/bootstrap.min.css" rel="stylesheet"/>
    <!-- bootstrapValidator验证 -->
    <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>
    <link href="${css}/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
</head>
<body style="width: 98%">
    <form id="myForm" class="form-horizontal" method="post" >
        <div class="form-group">
            <label for="instrumentId" class="col-sm-2 control-label">仪器</label>
            <div class="col-sm-10">
                <select id="instrumentId" name="instrumentId" class="form-control">
                    <option value="">请选择...</option>
                    <c:forEach items="${instrumentList}" var="instrument">
                        <option value="${instrument.id}">${instrument.instrumentName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="mkMedicalInstrumenId" class="col-sm-2 control-label">美康编号SN</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="mkMedicalInstrumenId" name="mkMedicalInstrumenId"
                       placeholder="请输入美康编号SN">
            </div>
        </div>
        <div class="form-group">
            <label for="medicalInstrumenId" class="col-sm-2 control-label">厂家编号SN</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="medicalInstrumenId" name="medicalInstrumenId"
                       placeholder="请输入厂家编号SN">
            </div>
        </div>
        <div class="form-group">
            <label for="installAddress" class="col-sm-2 control-label">安装地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="installAddress" name="installAddress"
                       placeholder="请输入安装地址">
            </div>
        </div>
        <div class="form-group">
            <label for="installType" class="col-sm-2 control-label">安装类别</label>
            <div class="col-sm-10">
                <select id="installType" name="installType" class="form-control">
                    <option value="1" >医院</option>
                    <option value="2" >个人</option>
                </select>
            </div>
        </div>
        <div id="hospitalDiv" class="form-group">
            <label for="hosId" class="col-sm-2 control-label">医院</label>
            <div class="col-sm-10">
                <select id="hosId" name="hosId" class="form-control">
                    <option value="">请选择...</option>
                    <c:forEach items="${hospitalList}" var="hospital">
                        <option value="${hospital.id}">${hospital.hospName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">安装时间</label>
            <div class="col-sm-4">
                <div class="input-group date" id="datetimePicker">
                    <input type="text" class="form-control" name="installTime"size="16" placeholder="安装时间" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="installMan" class="col-sm-2 control-label">安装人员</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="installMan" name="installMan"
                       placeholder="请输入安装人员">
            </div>
        </div>
        <div class="modal-footer" style="text-align: center ">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt">关闭</button>
            <button type="submit" class="btn btn-primary">保存</button>
        </div>
    </form>

    <!-- jQuery -->
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="${js}/bootstrap.min.js"></script>

    <script src="${js}/bootbox.js"></script>
    <!-- bootstrapValidator验证 -->
    <script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
    <!-- bootstrapValidator验证 国际化中文 -->
    <script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
    <!-- DataTables JavaScript -->
    <script src="${js}/jquery.twbsPagination.min.js"></script>
    <script src="${js}/bootstrap-dateTime/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${js}/bootstrap-dateTime/locales/bootstrap-datetimepicker.zh-CNxyc.js" ></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.date').datetimepicker({
                language:  'zh-CN',
                weekStart:  0,
                todayBtn: true,
                autoclose:  1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            });

            /**
             * 判断用户类型是否为医生，是医生的话，显示医生要录入的信息div
             * */
            $("#installType").change(function(){
                if(this.value=="1"){
                    $("#hospitalDiv").show();
                } else {
                    $("#hospitalDiv").hide();
                }
            });

            $('#myForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    instrumentId: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    mkMedicalInstrumenId: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    installAddress: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    installTime: {
                        validators: {
                            notEmpty: true,
                            date: {
                                format: 'YYYY-DD-MM'
                            }
                        }
                    }
                }
            }).on('success.form.bv', function (e) {
                e.preventDefault();
                $.ajax({
                    url:'${URL_ADM_INSTRUMENTINSTALL_ADD}',
                    type:'post',
                    data:$('#myForm').serialize(),
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        window.parent.closeModal("add");
                    }
                });
            });

            //关闭弹出框
            $("#closeModalButt").on("click",function(){
                window.parent.simpleCloseModal("add");
            });

        });

    </script>
</body>
</html>